<template>
  <main-wrapper>
    <view class="content-wrapper">
      <view class="title-wrapper">
        <view class="avatar-wrapper">
          <image :src="avatar"/>
        </view>
        <view class="title-info">
          <view class="title-info-name">张三</view>
          <view class="title-info-phone">13368593251</view>
        </view>
      </view>
      <view class="content">
        <view class="menu-item-wrapper" v-for="item in menuList">
          <view class="menu-item-img">
            <image :src="item.img"/>
          </view>
          <view class="menu-item-title">
            {{item.title}}
          </view>
        </view>
      </view>
    </view>
  </main-wrapper>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import mainWrapper from '@/components/mainWrapper.vue';
import avatar from '@/static/avatar.png';
const menuList=ref([
  {
    title:'出入记录',
    img:avatar,
  },
  {
    title:'校外晚归',
    img:avatar,
  },
  {
    title:'校外未归',
    img:avatar,
  },
  {
    title:'校外时长统计',
    img:avatar,
  },
  {
    title:'预警',
    img:avatar,
  }
])
</script>

<style scoped lang="scss">
.content-wrapper{
  width: 100%;
  padding-top: 2rem;
  .title-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .avatar-wrapper{
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      image{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .title-info{
      padding-left: 1rem;
      .title-info-name{}
      .title-info-phone{}
    }
  }
  .content{
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    border-radius: 10px;
    padding-top: 1rem;
    .menu-item-wrapper{
      width: 33.33%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-bottom: 1rem;
      .menu-item-img{
        width: 80%;
        image{
          width: 100%;
          height: 5.5rem;
        }
      }
      .menu-item-title{}
    }
  }
}
</style>
